<template>
  <el-tooltip class="toolbar-fontsize" content="字号" placement="top">
    <el-popover placement="top-start" width="50" popper-class="font-size-popper" v-model="fontSizePickerVisible">
      <div class="toolbar-item" slot="reference">
        <i class="iconfont icon-40wenzishezhi"></i>
        <div class="curr-font-size">{{ fontSizeSelf }}</div>
        <div class="arrow-down"></div>
      </div>
      <el-scrollbar class="font-list">
        <div class="font-item" v-for="item in fontSizeArr" :key="item" @mousedown.prevent="onFontSizeSelect(item)">
          {{ item }}
        </div>
      </el-scrollbar>
    </el-popover>
  </el-tooltip>
</template>

<script>
export default {
  props: {},
  inject: ['getSelectStyleObj', 'execCommand'],
  data() {
    return {
      fontSizeSelf: 16,
      fontSizePickerVisible: false,
      fontSizeArr: [12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36, 48, 60, 72],
    }
  },
  computed: {
    selectStyleObj() {
      return this.getSelectStyleObj()
    },
    fontSize() {
      const strFontSize = this.selectStyleObj && this.selectStyleObj.fontSize
      if (strFontSize) {
        return strFontSize.substring(0, strFontSize.length - 2)
      }
      return this.fontSizeSelf
    },
  },
  watch: {
    selectStyleObj(val) {
      const strFontSize = val && val.fontSize
      if (strFontSize) {
        this.fontSizeSelf = strFontSize.substring(0, strFontSize.length - 2)
      }
    },
  },
  methods: {
    onFontSizeSelect(fontSize) {
      this.fontSizeSelf = fontSize
      this.fontSizePickerVisible = false
      this.setFontSize(fontSize)
    },
    setFontSize(fontSize) {
      this.execCommand('fontSize', fontSize + 'px')
    },
  },
}
</script>

<style lang="scss" scoped>
.toolbar-fontsize {
  @import '@styles/richText/toolbar.scss';
  .toolbar-item {
    display: flex;
    align-items: flex-end;
    user-select: none;
    i {
      font-size: 20px;
    }
    .curr-font-size {
      margin-left: 2px;
    }
  }
}
</style>
<style lang="scss">
.font-size-popper {
  min-width: auto;
  padding: 5px 0;
  .font-list {
    width: 100%;
    height: 200px;
    .font-item {
      font-size: 16px;
      width: 100%;
      text-align: center;
      margin: 5px 0;
      cursor: pointer;
      &:hover {
        background: #f3f3f3;
      }
    }
  }
}
</style>
